import React from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";

import { PickerOuterProps } from "../../../types/components/picker-panel";

/**
 * PickerPanel
 */
const PickerPanel: React.FC<PickerOuterProps> = function({title, onConfirm, onCancel,
   confirmTextStyle = {}, cancelTextStyle ={}, children}) {

  return (
    <View className="piker-panel">
      <View className="panel-header">
        <View
          className="panel-btn-View"
          style={{ textAlign: "left" }}
          onClick={() => {
            onCancel?.()
          }}
        >
          <Text style={{
            color: '#999999',
            ...cancelTextStyle
          }}>取消</Text>
        </View>
        {title ? <Text>{title}</Text> : null}
        <View
          className="panel-btn-View"
          style={{ textAlign: "right" }}
          onClick={() => {
            onConfirm?.();
          }}
        >
          <Text style={{ color: "#424141", ...confirmTextStyle }}>确定</Text>
        </View>
      </View>
      {children}
    </View>
  );
};

export default PickerPanel;
